<template>
  <el-dialog
    v-bind="$attrs"
    @close="$emit('update:model-value', false)"
    width="600px"
    :title="$t('modules.tms.terminal.setting_option')"
  >
    <div class="px-2">
      <el-button
        type="primary"
        size="small"
        @click="selectAll"
        v-if="showSelectAll"
      >{{$t('common.select_all')}}</el-button>
      <el-button
        type="danger"
        size="small"
        @click="unselect"
        v-if="showUnselect"
      >{{$t('common.unselect_all')}}</el-button>
    </div>
    <div class="wrapper">
      <div class="flex flex-wrap">
        <label class="option-item" v-for="(i, index) in components" :key="index">
          <input type="checkbox" class="checkbox" @change="handleChange" :data-key="i.label" />
          <div class="option-inner option">
            <div>
              <div class="tickmark"></div>
              <div class="icon">
                <svg-icon :icon-class="i.icon" class="text-2xl" />
              </div>
              <div class="name">{{i.label}}</div>
            </div>
          </div>
        </label>
      </div>
    </div>
    <!-- <el-checkbox-group v-model="checkList" @change="handleChange">
      <el-checkbox v-for="i in components" :key="i.key" :label="i.label"></el-checkbox>
    </el-checkbox-group>-->
  </el-dialog>
</template>

<script>
export default {
  props: ['components'],
  data() {
    return {
      checkList: []
    }
  },
  computed: {
    showSelectAll() {
      return this.checkList.length < this.components.length
    },
    showUnselect() {
      return this.checkList.length === this.components.length
    },
    checkboxes() {
      return document.querySelectorAll('input[data-key]')
    },
    allComponents() {
      return this.components.map((c) => c.label)
    }
  },
  methods: {
    handleChange(e) {
      const checked = e.target.checked
      const key = e.target.dataset.key
      if (checked) {
        this.checkList.push(key)
      } else {
        const index = this.checkList.indexOf(key)
        this.checkList.splice(index, 1)
      }
      this.$emit('change', this.checkList)
    },
    selectAll() {
      this.checkboxes.forEach((el) => {
        el.checked = true
      })
      this.checkList.splice(0)
      this.checkList.push(...this.allComponents)
      this.$emit('change', this.checkList)
    },
    unselect() {
      this.checkboxes.forEach((el) => {
        el.checked = false
      })
      this.checkList = []
      this.$emit('change', this.checkList)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  /* width: 780px; */
  margin: 0 auto;
}

.option-item {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  display: flex;
  position: relative;
  width: 130px;
  height: 130px;
  margin: 10px;
  .checkbox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    &:checked {
      display: block;
      & ~ .option-inner {
        border-color: #25d366;
        color: #25d366;
        .tickmark {
          display: block;
        }
      }
    }
  }
  .option-inner {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    /* padding: 20px 0; */
    cursor: pointer;
    color: #585c68;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid transparent;
    position: relative;
    .icon {
      margin-bottom: 10px;
    }
    .name {
      word-break: break-word;
    }
    &.option {
      .tickmark {
        border-color: #25d366 transparent transparent #25d366;
      }
    }
    .tickmark {
      position: absolute;
      top: -1px;
      left: -1px;
      border: 20px solid;
      display: none;
      &:before {
        content: '';
        position: absolute;
        top: -15px;
        left: -15px;
        width: 19px;
        height: 9px;
        border: 3px solid;
        border-color: transparent transparent #fff #fff;
        transform: rotate(-45deg);
      }
    }
  }
}
</style>
